<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" >

	<ui:composition template="/templates/gerenciamentoLojista.xhtml" >
		<ui:define name="js">
			<h:outputScript library="js" name="jquery.maskedinput-1.2.2.min.js" target="body" />
		</ui:define>
		<ui:define name="css">
			<link rel="stylesheet" type="text/css" href="style/folha.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/folhaextra.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/folha_lojista.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/folha_lojista3.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/lojistaoff.css" media="screen" />
			<style type="text/css">
			body {
				margin-left: 0px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
			}
			.camponovo {	width: 180px; height: 25px; float:left; font-family:Tahoma, Geneva, sans-serif; font-size:13px; margin: 6px 0px 0 0; line-height: 25px;
				text-align:left;
			}
			.campo4novo {	width: 220px; height: 25px; float:left; font-family:Tahoma, Geneva, sans-serif; font-size:13px; margin: 6px 0px 0 0; line-height: 25px;
				text-align:left;
			}
			</style>
		</ui:define>
		<ui:define name="mid">
			
			<div class="inside_extrato">
				<h:form id="form02">
				
					<h:panelGroup rendered="#{cadastroLojistaBean.tela02}" >
					
						<div class="lojista_titulo1_d"><img src="images/6px.gif" alt="" width="6" height="6" />Preencher dados</div>
					  	<div class="lojista_titulo1_1_1"><img src="images/seta.gif" alt="" width="12" height="22" /></div>
					  	<div class="lojista_titulo1_c"><strong>Solicitar Credenciamento</strong></div>
					  	<div class="numero_text_aba20"> <strong>2</strong> </div>
					  	<div class="text_aba20"> <strong>Dados Cadastrais</strong></div>
					  	<div class="line_aba20"></div>
					  	<div class="text_2_aba20" align="right">CEP.:</div>
					  	<div class="field_1a_aba20">
					  		<h:inputText id="buscaCep" value="#{cadastroLojistaBean.cepBusca}" size="9" maxlength="9" style="width:90px"/>
			  				<rich:jQuery selector="#form02\:buscaCep" query="mask('99999-999')" timing="domready" />
					  	</div>
					  	<div class="lupa">	
					  		<a4j:commandLink id="buscaLink" action="#{cadastroLojistaBean.buscarPorCep}" 
					  			render="selectUf,selectCidade,selectBairro,selectLogradouro" execute="buscaCep,buscaLink" >
					  			<img src="images/lupa.gif" alt="" width="22" height="22" />
					  		</a4j:commandLink>
					  	</div>
					  	<div class="field_1a_aba20"></div>
					  	<div class="field_1a_aba20"></div>
					  	<div class="text_2_aba20" align="right">Estado</div>
					  	<div class="field_1_aba20">
					    	<h:selectOneMenu id="selectUf" converter="ufConverter" value="#{cadastroLojistaBean.cadastroLojista.uf}" styleClass="input-style" > 
					    		<f:selectItem itemLabel="Uf" noSelectionOption="true" />
								<f:selectItems value="#{cadastroLojistaBean.ufs}" var="uf" itemLabel="#{uf.nomeSimpl}" itemValue="#{uf}" /> 
							</h:selectOneMenu> 
					  	</div>
					  	
				  		<div class="text_2_aba20" align="right">Cidade</div>
						<div class="campo4novo">
						    <h:selectOneMenu id="selectCidade" style="width:210px;" converter="cidadeConverter" value="#{cadastroLojistaBean.cadastroLojista.cidade}" styleClass="input-style" > 
								<f:selectItems value="#{cadastroLojistaBean.cidades}" var="cidade" itemLabel="#{cidade.nome}" itemValue="#{cidade}" /> 
							</h:selectOneMenu> 
						</div>
						<div class="camponovo">
						    <h:inputText id="cidadeInput" value="#{cadastroLojistaBean.cidadeBusca}" size="30" /> 
						</div>
						<div class="lupa">
						  	<a4j:commandLink id="cidadeLink" action="#{cadastroLojistaBean.buscarPorCidade}" render="selectCidade" 
					  				execute="cidadeInput,cidadeLink,selectUf" >
					  			<img src="images/lupa.gif" alt="" width="22" height="22" />
					  		</a4j:commandLink>	
						</div>
					  	
					  	<div class="text_2_aba20" align="right">Bairro</div>
						<div class="campo4novo">
							<h:selectOneMenu id="selectBairro" style="width:210px;" converter="bairroConverter" value="#{cadastroLojistaBean.cadastroLojista.bairro}" styleClass="input-style" > 
								<f:selectItems value="#{cadastroLojistaBean.bairros}" var="bairro" itemLabel="#{bairro.nome}" itemValue="#{bairro}" /> 
							</h:selectOneMenu> 
						</div>
						<div class="camponovo">
						    <h:inputText id="bairroInput" value="#{cadastroLojistaBean.bairroBusca}" size="30" /> 
						</div>
						<div class="lupa">
						  	<a4j:commandLink id="bairroLink" action="#{cadastroLojistaBean.buscarPorBairro}" render="selectBairro" 
					  				execute="bairroInput,bairroLink,selectCidade" >
					  			<img src="images/lupa.gif" alt="" width="22" height="22" />
					  		</a4j:commandLink>
						</div>
					  	
					  	<div class="text_2_aba20" align="right">Logradouro</div>
						<div class="campo4novo">
							<h:selectOneMenu id="selectLogradouro" style="width:210px;" converter="logradouroConverter" value="#{cadastroLojistaBean.cadastroLojista.logradouro}" styleClass="input-style" > 
								<f:selectItems value="#{cadastroLojistaBean.logradouros}" var="logradouro" itemLabel="#{logradouro.nome}" itemValue="#{logradouro}" /> 
							</h:selectOneMenu> 
						</div>
						<div class="camponovo">
						    <h:inputText id="logradouroInput" value="#{cadastroLojistaBean.logradouroBusca}" size="30" /> 
						</div>
						<div class="lupa">
						  	<a4j:commandLink id="logradouroLink" action="#{cadastroLojistaBean.buscaPorLogradouro}" render="selectLogradouro" 
					  				execute="logradouroInput,logradouroLink,selectBairro" >
					  			<img src="images/lupa.gif" alt="" width="22" height="22" />
					  		</a4j:commandLink>
						</div>
					  	
					  	<div class="text_2_aba20" align="right">Nº</div>
					 	<div class="field_1_aba20">
					    	<h:inputText value="#{cadastroLojistaBean.cadastroLojista.numero}" size="8" />
					  	</div>
					  
					  	<div class="text_2_aba20" align="right">Complemento</div>
					  	<div class="field_1_aba20">
					    	<h:inputText value="#{cadastroLojistaBean.cadastroLojista.complemento}" size="20" />
					  	</div>
					  	
					  			
					  	<div class="text_2_aba20" align="right">Telefone</div>
					  	<div class="field_1_aba20">
					  		<h:inputText id="telefone" value="#{cadastroLojistaBean.cadastroLojista.telefone}" maxlength="12" style="width:110px"/>
					  		<rich:jQuery selector="#form02\:telefone" query="mask('(99) 9999-9999')" timing="domready" />
					  	</div>
					  	
					  	<div class="text_2_aba20" align="right">Celular</div>
					  	<div class="field_1_aba20">
					  		<h:inputText id="celular" value="#{cadastroLojistaBean.cadastroLojista.celular}" maxlength="12" style="width:110px"/>
					  		<rich:jQuery selector="#form02\:celular" query="mask('(99) 9999-9999')" timing="domready" />
					  	</div>
					  	
					 	<div class="text_2_aba20" align="right">Contato</div>
					  	<div class="field_1_aba20">
						    <h:inputText value="#{cadastroLojistaBean.cadastroLojista.contato}" style="width:160px"/>
					  	</div>
					  	
					  	<div class="text_2_aba20" align="right">E-mail</div>
					  	<div class="field_1b_aba20">
					    	<h:inputText value="#{cadastroLojistaBean.cadastroLojista.email}" style="width:200px" required="true" 
				         			requiredMessage="CAMPO EMAIL É OBRIGATÓRIO" validatorMessage="FORMATO DE EMAIL INVÁLIDO" >
					    		<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
					    	</h:inputText>
					  	</div>
					  	<div class="field_1a_aba20" align="right">
					  		<a4j:commandLink action="#{cadastroLojistaBean.cadastroEndereço}" render="@all">
					  			<img src="images/botaoavancar_verde_2.gif" alt="" width="58" height="20" />
					  		</a4j:commandLink>
					  	</div>
					  	<div class="spacer1a"></div>
					
					</h:panelGroup>
					<h:panelGroup rendered="#{cadastroLojistaBean.tela03}" >
						
						<div class="lojista_titulo1_d"><img src="images/6px.gif" alt="" width="6" height="6" />Dados Bancários</div>
					  	<div class="lojista_titulo1_1_1"><img src="images/seta.gif" alt="" width="12" height="22" /></div>
					  	<div class="lojista_titulo1_c"><strong>Solicitar Credenciamento</strong></div>
					  	<div class="numero_text_aba20"> <strong>3</strong> </div>
					  	<div class="text_aba20"> <strong>Dados Cadastrais Financeiros</strong></div>
					  	<div class="line_aba20"></div>
					  	<div class="box_cinza1">
					  		<div class="iframelojista_7a"><strong>Domicílio Bancário</strong></div>
					  		<div class="iframelojista_7b"><img src="images/seta_2.jpg" width="12" height="22" /></div>
					  		<div class="iframelojista_7c">Indique nos campos abaixo os dados do seu banco</div>
					  	</div>
					  	<div class="line_iframelojista_7"></div>
					  	<div class="box_cinza2">
					  		<div class="iframelojista_7e">Banco</div>
					  		<div class="iframelojista_7f">
						  	  	<h:selectOneMenu id="selectBanco" converter="bancoConverter" style="width:140px;" value="#{cadastroLojistaBean.bancoEscolhido}" styleClass="input-style" > 
									<f:selectItem itemLabel="Escolha o Banco" noSelectionOption="true" />
									<f:selectItems value="#{cadastroLojistaBean.bancos}" var="banco" itemLabel="#{banco.nome}" itemValue="#{bairro}" /> 
								</h:selectOneMenu> 
					  		</div>
					  		<div class="iframelojista_7e">Agência</div>
					  		<div class="iframelojista_7f">
					  	  		<h:inputText value="#{cadastroLojistaBean.agencia}" style="width:140px" required="true" requiredMessage="Agencia é um campo obrigatório"/>
					  		</div>
					  		<div class="iframelojista_7e">Conta</div>
					  		<div class="iframelojista_7i">
					  	  		<h:inputText value="#{cadastroLojistaBean.conta}" style="width:180px" required="true" requiredMessage="Conta é um campo obrigatório"/>
					    	</div>
					  		<div class="iframelojista_7e"></div>
					  		<div class="iframelojista_7f"></div>
					  		<div class="iframelojista_7g">Digite o número da agência com o dígito.<br />Utilize traços para separar o digito</div>
					  		<div class="iframelojista_7h">Digite o número da conta com o dígito.<br />Utilize traços para separar o digito</div>
					  	</div>
					  	<div class="box_cinza1">
					    	<div class="iframelojista_7a"><strong>Meios de captura</strong></div>
					    	<div class="iframelojista_7b"><img src="images/seta_2.jpg" alt="" width="12" height="22" /></div>
					    	<div class="iframelojista_7c">Selecione o(s) meio(s) de captura para seu estabelecimento</div>
					  	</div>
					  	<div class="line_iframelojista_7"></div>
					  	
					  	<div class="box_cinza2">
					  		<div class="iframelojista_7f">Metodo de Captura</div>
					  		<div class="iframelojista_7f">
						  	  	<h:selectOneMenu style="width:240px;" value="#{cadastroLojistaBean.meioCapturaEscolhida}" converter="meioCapturaConverter" styleClass="input-style" > 
									<f:selectItem itemLabel="Escolha o Metodo de Captura" noSelectionOption="true" />
									<f:selectItems value="#{cadastroLojistaBean.meiosCapturas}" var="mc" itemLabel="#{mc.nome}" itemValue="#{mc}" />
								</h:selectOneMenu> 
					  		</div>
			
					  	</div>
					  	
					  	<div class="line_iframelojista_7">
					    	<div class="lojista_titulo1_d" align="right">
					    		<a4j:commandLink action="#{cadastroLojistaBean.cadastroBanco}" render="@all" >
					  				<img src="images/botaoavancar_verde_2.gif" alt="" width="58" height="20" />
					  			</a4j:commandLink>
					    	</div>
					    	<div class="lojista_titulo1_c"></div>
					  	</div>
					</h:panelGroup>
					<h:panelGroup rendered="#{cadastroLojistaBean.tela04}" >
					
						<div class="lojista_titulo1_h"></div>
	  					<div class="lojista_titulo1_1_1"><img src="images/seta.gif" alt="" width="12" height="22" /></div>
	  					<div class="lojista_titulo1_c"><strong>Solicitar Credenciamento</strong></div>
	  					<div class="numero_text_aba20"> <strong>4</strong> </div>
	  					<div class="text_aba20"> <strong>Contrato de credenciado</strong></div>
	  					<div class="line_aba20"></div>
	  					<div class="box_cinza3">
	  						<div class="box_branco" align="center">
	  							<h:commandLink action="#{cadastroLojistaBean.download}" value="Baixar o Contrato em PDF" style="font-size: 16px" />
	  						</div>
	   						<div class="concordo2">
	   							<h:selectBooleanCheckbox value="#{cadastroLojistaBean.cadastroLojista.aceiteContrato}" />
					  					Concordo com o contrato e desejo me afiliar ao sistema USA Card.
	   						</div>
	   						<div class="concordo3">
	   							<a4j:commandLink action="#{cadastroLojistaBean.aceiteContrato}" render="@all">
	   								<img src="images/botaoconcluir_verde_2.gif" width="58" height="20" />
	   							</a4j:commandLink>
	   						</div>
						</div>
  
  					</h:panelGroup>
  					<h:panelGroup rendered="#{cadastroLojistaBean.tela05}" >
  					
  						<div class="lojista_titulo1_h"></div>
	  					<div class="lojista_titulo1_1_1"><img src="images/seta.gif" alt="" width="12" height="22" /></div>
	  					<div class="lojista_titulo1_c"><strong>Solicitar Credenciamento</strong></div>
	  					<div class="numero_text_aba20"> <strong>4</strong> </div>
	  					<div class="text_aba20"> <strong>Seu cadastro já foi concluido. Nossa equipe entrará em contato para finalizá-lo</strong></div>
	  					<div class="line_aba20"></div>
	  					
  					
  					</h:panelGroup>
				
				</h:form>
			</div>

		</ui:define>
	</ui:composition>

</html>